<template>
  <div class="interviewDetailContainer" v-if="interviewData.interTitle">
    <div class="interviewDetail">
      <div class="left">
        <div class="card">
          <!--          <img :src="interviewData.interImage" alt="" class="coverImg"/>-->
          <div class="leftContent">
            <div class="title">
              {{ interviewData.interTitle }}
            </div>
            <!-- 用户信息 -->
            <div class="author">
              <div class="authorAvatar">
                <img
                    class="avatar"
                    :src="
                    interviewData.avatar && interviewData.avatar != ''
                      ? interviewData.avatar
                      : require('assets/img/defaultAvatar.jpg')
                  "
                    alt=""
                    lazy
                    fit="cover"
                    @click="gotoPersonal(interviewData.authorId)"
                />
              </div>
              <div
                  class="authorName"
                  @click="gotoPersonal(interviewData.authorId)"
              >
                {{ interviewData.authorNickname }}
              </div>
              <div class="publishDate">
                {{ interviewData.createTime }}
                <div class="updateinterview"
                     v-if="interviewData.authorId == $store.state.userInfo.userId">
                  <div @click="isInterviewShow = true">更新职位</div>
                  <div class="fenge">|</div>
                  <div @click="deleteCurrentInterview">删除职位</div>
                </div>
              </div>
            </div>
            <!-- 职位内容 -->
            <div class="category">
              招聘岗位：
              <span class="category1">{{ interviewData.interCategory }}</span>
            </div>
            <div class="phone">
              联系方式：
              <span class="phone1">{{ interviewData.interPhone }}</span>
            </div>
            <div class="phone">
              地点：
              <span class="phone1">{{ interviewData.interAddress }}</span>
            </div>
            <div class="info">
              薪资待遇：
              <span class="technology1">{{ interviewData.interInfo }}  (平均{{ interviewData.interMoney }})</span>
            </div>
            <div class="technology">
              职位介绍：<br/>
              <span class="technology1">{{ interviewData.interTechnology }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 用户信息卡片 -->
        <user-info-card :userId="interviewData.authorId"></user-info-card>
      </div>
    </div>
    <interview
        :isCardShow="isInterviewShow"
        :originInterview="interviewData"
        @closeCard="isInterviewShow = false"
        @reFreshInterviewList="getinterviewData($route.params.id)"
    ></interview>
  </div>
</template>

<script>
import GoTop from "../components/goTop/GoTop.vue";
import UserInfoCard from "../components/userInfoCard/UserInfoCard.vue";
import Interview from "../components/writeCard/Interview.vue";

export default {
  name: "interdetail",
  components: {
    GoTop,
    UserInfoCard,
    Interview,
  },

  data() {
    return {
      // 职位数据
      interviewData: {},
      interviewType:'',
      isInterviewShow: false,
    };
  },
  methods: {
    // 请求
    // 请求职位数据
    async getinterviewData(id) {
      let res = await this.$request(`/dqinterview/superlist?interId=${id}`);
      console.log(res);
      this.interviewData = res.data.data.list[0];
      this.getInterviewType(this.interviewData.interType);
    },
    async getInterviewType(id) {
      let res = await this.$request(`/dqtype/${id}`);
      console.log(res);
      this.interviewType = res.data.data;
    },

    // 点击删除当前职位的回调
    async deleteCurrentInterview() {
      this.$confirm("确认要删除此职位吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let res = await this.$request(
            `/dqinterview/delete/${this.$route.params.id}`
        );
        if (res.data.code == 200) {
          this.$router.go(-1);
        }
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    // 跳转至个人主页
    gotoPersonal(id) {
      this.$router.push({
        name: "personal",
        params: {id},
        query: {type: "post", page: 1},
      });
    },

  },
  async created() {
    window.scrollTo(0, 0);
    await this.getinterviewData(this.$route.params.id);
  },
  mounted() {
  },
};
</script>

<style scoped lang="less">

.title {
  font-weight: bold;
  font-size: 28px;
  line-height: 37px;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
}

.category, .phone, .info, .technology {
  font-weight: bold;
  font-size: 20px;
  line-height: 37px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
}

.category1, .phone1, .info1, .technology1 {
  font-size: 15px;
  color: #666666;
}

.interviewDetailContainer {
  display: flex;
  justify-content: center;
  background-color: #f8f8f8;
}

.interviewDetail {
  display: flex;
  max-width: 1200px;
  width: 90vw;
  padding: 40px 0;
}

.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
}

.left {
  flex: 1;
  margin: 0 20px;
}

.card {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background: #fdfdfd;
  border-radius: 10px;
  margin-bottom: 30px;
}

.leftContent {
  padding: 30px 30px 0px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.right {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 90px;
  width: 325px;
  height: 550px;
}

.author {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.authorName {
  color: #4480c9;
  cursor: pointer;
  margin: 0 20px 0 10px;
}

.publishDate {
  font-size: 13px;
  color: rgb(136, 136, 136);
  position: relative;
  flex: 1;
}

.updateinterview {
  position: absolute;
  right: 0;
  top: 0px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  display: flex;
}

.updateinterview .fenge {
  margin: 0 10px;
  color: #ccc;
}

.content {
  font-size: 15px;
  color: #111;
  line-height: 23px;
  word-break: break-all;
  margin-bottom: 20px;
  padding: 0 30px;
  max-width: 850px;
  box-sizing: border-box;
}

.commentControl {
  margin: 30px 30px 35px;
  padding: 20px 0px 0;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-top: 1px solid #eee;
}

// 网上抄的拟态按钮嘻嘻
.commentControlItem {
  padding: 13px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  color: #666;
  font-weight: bold;
  // border: 1px solid #eee;
  font-size: 14px;
  letter-spacing: 1px;
  background-color: #f8f8f8;
  box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
    -2px -2px 12px rgba(255, 255, 255, 0.5),
  inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0, 0, 0, 0.15);
}

.commentControlItem:hover {
  box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
    inset -2px -2px 12px rgba(255, 255, 255, 0.5),
  inset 2px 2px 4px rgba(255, 255, 255, 0.1),
  inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

.likeUsersAvatar {
  position: absolute;
  right: 0px;
}

.likeUsersAvatar img {
  position: absolute;
  right: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.likeUsersAvatar img:nth-child(1) {
  z-index: 3;
}

.likeUsersAvatar img:nth-child(2) {
  z-index: 2;
  right: 21px;
}

.likeUsersAvatar img:nth-child(3) {
  z-index: 1;
  right: 42px;
}

.coverImg {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
</style>
